<template>
	<view>
		<u-navbar title="管理员">
			<view slot="right" class="u-p-x-16 u-p-y-4 u-m-r-30 radius bg-blue" @tap="edit=!edit">
				<text class="u-font-28">{{edit?'完成':'编辑'}}</text>
			</view>
		</u-navbar>
		<!-- <view class="u-p-x-30 u-p-y-10">
			<text class="u-font-28">群主</text>
		</view>
		<view class="group u-border-bottom">
			<u-avatar :src="info.avatar" mode="square"></u-avatar>
			<text class="u-flex-1 u-m-l-20 u-font-34">{{info.userName}}</text>
		</view> -->
		<view class="u-p-x-30 u-p-y-10">
			<text class="u-font-28">管理员</text>
		</view>
		<view :class="{editing:edit}">
			<view class="group u-border-bottom"
				v-for="(user,index) in list" 
				:key="index"
			>
				<u-avatar :src="user.avatar" mode="square"></u-avatar>
				<text class="u-flex-1 u-m-l-20 u-font-34">{{user.userName}}</text>
				<text class="remove-btn" @tap="removeManager(user)"></text>
			</view>
			<view class="group add" @tap="addManager">
				<text class="icon iconfont icon-increase"></text>
				<text class="u-font-34">添加管理员</text>
			</view>
		</view>
		<u-modal
			v-model="ask.show"
			showCancelButton
			:content="ask.content"
			@cancel="reject"
			@confirm="resolve"
		>
		</u-modal>
	</view>
</template>

<script>
	import {state} from "../bus.js"
	import {fetchGroupAdminList,addGroupAdmin,removeGroupAdmin} from "@/api/addr.js"
	export default {
		data() {
			return {
				edit:false,
				list:[],
				ask:{
					show:false,
					content:''
				},
				bridge:null,
			};
		},
		computed:{
			info(){
				return state.info
			}
		},
		onLoad() {
			this.init()
		},
		methods:{
			resolve(e){
				this.bridge&&this.bridge.resolve&&this.bridge.resolve(e)
			},
			reject(e){
				this.bridge&&this.bridge.reject&&this.bridge.reject(e)
			},
			async init(){
				const list = await fetchGroupAdminList(state.info.id)
				this.list = list
			},
			async addManager(){
				if(this.lock){
					return 
				}
				const manager = await new Promise((resolve,reject)=>{
					uni.navigateTo({
						url:`/pages/group/admin/addManager?id=${state.info.id}`,
						events:{
							confirm:resolve
						},
						fail:reject
					})
				})
				try{
					this.lock = true
					await addGroupAdmin({id:state.info.id,userId:manager.userId})
					this.init()
				}finally{
					this.lock = false
				}
			},
			async removeManager(item){
				if(this.lock){
					return 
				}
				await new Promise((resolve,reject)=>{
					this.bridge = {
						resolve,
						reject
					}
					this.ask.show = true
					this.ask.content = `确认取消“${item.userName}”的管理员?`
				})
				try{
					this.lock = true
					await removeGroupAdmin({id:state.info.id,userId:item.userId})
					this.list = this.list.filter(({userId})=>userId!=item.userId)
				}finally{
					this.lock = false
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.group{
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
		.remove-btn{
			width: 50rpx;
			height: 50rpx;
			background-color: #e54d42;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			opacity: 0;
			pointer-events: none;
			&::after{
				content: '';
				width: 64%;
				height: 12%;
				border-radius: 1000rpx;
				background-color: #ffffff;
			}
		}
	}
	.add{
		color: #333333;
		.icon{
			font-size: 60rpx;
			color: #0081ff;
			margin-right: 20rpx;
		}
	}
	.editing{
		.remove-btn{
			opacity: 1;
			pointer-events: auto;
		}
		.add{
			pointer-events: none;
			color: #999999;
			.icon{
				color: #999999;
			}
		}
	}
</style>
